//1.商品列表（商品图片、单价、数量、小计）
const goodsList = [
  {
    id: 1,
    img: './img/书籍/23353342-1_l.jpg',
    name: '从你的全世界路过',
    price: 41.00
  },
  {
    id: 2,
    img: './img/书籍/23353342-1_l.jpg',
    name: '从你的全世界路过',
    price: 41.00
  }
]

let html = '';
goodsList.forEach(function (item, index) {
  html += `
  <tr>
                    <td class="td-goods">
                        <input type="checkbox" class="check">
                        <img src="${item.img}" alt="">
                    </td>
                    <td>
                        <div class="goods-msg">${item.name}</div>
                    </td>
                    <td>
                        <div class="price">${item.price.toFixed(2)}</div>
                    </td>
                    <td>
                        <div class="num">
                            <button class="sum">+</button>
                            <input type="number" id="num" value="1">
                            <button class="subtract">-</button>
                        </div>
                    </td>
                    <td>
                        <div class="price-1">${item.price.toFixed(2)}</div>
                    </td>
                    <td>
                        <div class="ops">
                            <button class="del">删除</button>
                            <button class="move">移到我的关注</button>
                        </div>
                    </td>
                </tr>
  `
})

//输出到tbody
document.querySelector('tbody').innerHTML = html;

//数量&小计
//获取dom节点
let priceDoms = document.querySelectorAll('.price');
let price1Doms = document.querySelectorAll('.price-1');
let sumDoms = document.querySelectorAll('.sum');
let subtractDoms = document.querySelectorAll('.subtract');
let numDoms = document.querySelectorAll('#num');

//循环监听 + 点击事件
sumDoms.forEach(function (item, index) {
  item.addEventListener('click', function () {
    //获取num的值+1
    numDoms[index].value = parseInt(numDoms[index].value) + 1;
    //计算小计
    let price1 = numDoms[index].value * priceDoms[index].innerText;
    price1Doms[index].innerText = price1.toFixed(2);
    //调用计算总价和总量
    countPriceOne();
  })
})

//循环监听 - 点击事件
subtractDoms.forEach(function (item, index) {
  item.addEventListener('click', function () {
    //边界问题
    if (numDoms[index].value > 1) {
      //获取num的值+1
      numDoms[index].value = parseInt(numDoms[index].value) - 1;
      //计算小计
      let price1 = numDoms[index].value * priceDoms[index].innerText;
      price1Doms[index].innerText = price1.toFixed(2);
      //调用计算总价和总量
      countPriceOne();
    }
  })
})

//单选全选框功能
//获取全选框和单选框的dom节点
let checkAllDoms = document.querySelectorAll('.checkAll');
let checkDoms = document.querySelectorAll('.check');

//循环监听所有全选框
checkAllDoms.forEach(function (item, index) {
  item.addEventListener('click', function () {
    //点击全选框--状态
    let status = item.checked;
    //把状态传给两个全选框
    checkAllDoms[0].checked = status;
    checkAllDoms[1].checked = status;
    //循环更改所有单选框状态
    for (let i = 0; i < checkDoms.length; i++) {
      checkDoms[i].checked = status;
    }
    //调用计算总价和总量
    countPriceOne();
  })
})

checkDoms.forEach(function (item, index) {
  item.addEventListener('click', function () {
    let flag = true;
    for (let i = 0; i < checkDoms.length; i++) {
      if (checkDoms[i].checked == false) {
        flag = false;
      }
    }
    checkAllDoms[0].checked = flag;
    checkAllDoms[1].checked = flag;
    //调用计算总价和总量
    countPriceOne();
  })
})

//计算总价
let totalDom = document.querySelector('.choose-num');
let moneyDom = document.querySelector('.price-total');
function countPriceOne() {
  let total = 0;
  let money = 0;
  for (let i = 0; i < checkDoms.length; i++) {
    if (checkDoms[i].checked == true) {
      money = money + parseFloat(price1Doms[i].innerText);
      total = total + parseInt(numDoms[i].value);
    }
  }
  //页面渲染
  totalDom.innerHTML = total;
  moneyDom.innerHTML = money.toFixed(2);

  //将总价money存储到localStorage
  console.log(money);
  //转为json存储
  localStorage.setItem('money', JSON.stringify(money));
  localStorage.setItem('total', JSON.stringify(total));
}
//调用
countPriceOne();

//跳转pay
// 获取“去结算”按钮
const payButton = document.querySelector('.pay');

// 为“去结算”按钮添加 click 事件监听器
payButton.addEventListener('click', () => {
  // 跳转到指定页面
  window.location.href = 'http://127.0.0.1:5501/settlement.html';
});

//删除功能
//删除
// 获取所有删除按钮
const deleteButtons = document.querySelectorAll('.del');

// 遍历所有删除按钮，为其添加 click 事件监听器
deleteButtons.forEach(button => {
  button.addEventListener('click', (event) => {
    // 获取被点击的删除按钮所在的行，获取当前点击事件发生时，离目标元素最近的祖先元素"tr"
    const row = event.target.closest('tr');

    // 删除该行
    row.parentNode.removeChild(row);
    // 重新获取所有的dom-修复bug
    priceDoms = document.querySelectorAll('.price');
    price1Doms = document.querySelectorAll('.price-1');
    sumDoms = document.querySelectorAll('.sum');
    subtractDoms = document.querySelectorAll('.subtract');
    numDoms = document.querySelectorAll('#num');


    totalDom = document.querySelector('.choose-num');
    moneyDom = document.querySelector('.price-total');

    checkAllDoms = document.querySelectorAll('.checkAll');
    checkDoms = document.querySelectorAll('.check');
    countPriceOne();
  });
});
// 页面跳转
let navLogin = document.querySelector('.nav-login');
let navRegist = document.querySelector('.nav-regist');

navLogin.addEventListener('click',function(){
  window.location.href = '/login.html';
});
navRegist.addEventListener('click',function(){
  window.location.href = '/register.html';
});

let starBox1 = document.querySelector('.star-box-1')
let starBox2 = document.querySelector('.star-box-2')

starBox1.addEventListener('click', function (event) {
  // 获取在 starBox1 元素内点击位置相对于元素左侧的水平坐标（x轴偏移量）
    let x = event.offsetX;
    // 将点击位置的 x 坐标值作为 starBox2 元素的宽度
    starBox2.style.width = x + 'px';
})
let starBox1_1 = document.querySelector('.star-box-1-1')
let starBox2_1 = document.querySelector('.star-box-2-1')

starBox1_1.addEventListener('click', function (event) {
    let x = event.offsetX;
    starBox2_1.style.width = x + 'px';
})
let starBox1_2 = document.querySelector('.star-box-1-2')
let starBox2_2 = document.querySelector('.star-box-2-2')

starBox1_2.addEventListener('click', function (event) {
    let x = event.offsetX;
    starBox2_2.style.width = x + 'px';
})
let starBox1_3 = document.querySelector('.star-box-1-3')
let starBox2_3 = document.querySelector('.star-box-2-3')

starBox1_3.addEventListener('click', function (event) {
    let x = event.offsetX;
    starBox2_3.style.width = x + 'px';
})
let starBox1_4 = document.querySelector('.star-box-1-4')
let starBox2_4 = document.querySelector('.star-box-2-4')

starBox1_4.addEventListener('click', function (event) {
    let x = event.offsetX;
    starBox2_4.style.width = x + 'px';
})
